<script lang="ts" setup>
import { useStorage } from '@peng_kai/kit/libs/vueuse';
import AgentLogo from '~/assets/imgs/agent-logo-s2.svg';
import G9Logo from '~/assets/imgs/logo.png';

const pwaTipbarClosed = useStorage('PWA_TIPBAR_CLOSED', 0);
const showPwaTipbar = computed(() => (Date.now() - pwaTipbarClosed.value) > 86400000 && !envs.isTg && !envs.isPwa);
const router = useRouter();

const apiActivityInstallPwaQry = useQuery({
  queryKey: [apis.apiActivityInstallPwa.id],
  queryFn: () => apis.apiActivityInstallPwa(undefined),
});
const activityInstallPwa = computed(() => apiActivityInstallPwaQry.data.value);

function toInstruction() {
  router.push({ name: RN.HELP_PWA_INSTRUCTION }).then(close);
}

function close() {
  pwaTipbarClosed.value = Date.now();
}
</script>

<template>
  <div v-if="showPwaTipbar" class="grid grid-cols-[auto_1fr_auto] w-full items-center gap-3 bg-sys-layer-e px-3 py-2.5">
    <div class="h-5 w-5 flex items-center justify-center rounded-[50%] bg-sys-layer-d" @click="close">
      <i class="i-ion:close-outline" />
    </div>
    <div class="flex items-center gap-2" @click="toInstruction">
      <img
        :src="$store.app.isAgent ? AgentLogo : G9Logo"
        class="h-11.5 w-11.5 rounded-3"
        :class="{ invisible: $store.app.isAgent === undefined }"
      >
      <div>
        <div class="text-3.5 text-sys-text-head font-bold">
          Application（IOS）
        </div>
        <div class="text-3" />
        <div class="flex">
          <i v-for="i in 5" :key="i" class="i-ri:star-s-fill text- text-amber" />
        </div>
        <div class="text-3 text-sys-text-body">
          Download and get {{ activityInstallPwa?.amount }} {{ activityInstallPwa?.currency }}
        </div>
      </div>
    </div>
    <div class="h-8 min-w-16.5 flex items-center justify-center rounded-4 bg-brand500 text-3.5 text-white font-bold" @click="toInstruction()">
      Install
    </div>
  </div>
</template>
